<template>
	<div class="admin">
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="专业">
				<el-select v-model="subjectType" placeholder="专业类型">
					<el-option v-for="(type,index) in types" :label="type.label" :value="type.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="题目分类">
				<el-select v-model="subjectCategory" placeholder="题目分类">
					<el-option v-for="(category,index) in types[subjectType-1].children" 
						:label="category.label" 
						:value="category.value"/>
				</el-select>
			</el-form-item>
			<el-form-item label="题目">
				<el-input v-model="subjectName" placeholder="面试题目" clearable></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button type="warning" @click="createDialogVisible=true">添加</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<el-table :data="tableData" size="small" stripe style="width: 100%" v-loading="tableLoading">
				<el-table-column prop="title" label="标题" width="400" align="center"/>
				<el-table-column label="专业类型" align="center">
					<template v-slot="scope"> {{ techType(scope.row.type) }} </template>
				</el-table-column>
				<el-table-column label="题目分类" width="120" align="center">
					<template v-slot="scope"> {{ subCategory(scope.row.category) }} </template>
				</el-table-column>
				<el-table-column prop="author" label="编辑人" width="140" align="center"/>
				<el-table-column label="最后编辑时间" width="220" align="center">
					<template v-slot="{row}"> {{ new Date(row.last_modify).format('yyyy-MM-dd hh:mm:ss') }} </template>
				</el-table-column>
				<el-table-column label="操作" width="280" align="center">
					<template v-slot="scope">
						<el-button size="mini">详 情</el-button>
						<el-button size="mini" @click="open_edit_dialog(scope.row)">编 辑</el-button>
						<el-popconfirm title="确定一定肯定要删除吗？" style="margin-left: 10px;" @confirm="remove(scope.row)">
							<el-button slot="reference" size="mini" type="danger">删 除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center" class="mt-2">
				<el-pagination background layout="total, prev, pager, next, jumper"
					:current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
					@current-change="page_change" :total="searchForm.total">
				</el-pagination>
			</el-row>
		</el-row>
		
		<!-- 新建窗口 -->
		<el-dialog title="创建新题目" width="90%"
			:visible.sync="createDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
			<el-form inline>
				<el-form-item label="题目" required>
					<el-input v-model="createForm.title" style="width: 400px;"></el-input>
				</el-form-item>
				<el-form-item label="专业">
					<el-select v-model="createForm.type" placeholder="专业类型">
						<el-option v-for="(type,index) in types" :label="type.label" :value="type.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题目分类">
					<el-select v-model="createForm.category" placeholder="题目分类">
						<el-option v-if="category.value!=0" v-for="(category,index) in types[createForm.type-1].children" :label="category.label" :value="category.value"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<MDViewer ref="createMdViewer"></MDViewer>
		  
			<span slot="footer" class="dialog-footer">
				<el-button @click="createDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">保 存</el-button>
			</span>
		</el-dialog>
		
		<!-- 编辑窗口 -->
		<el-dialog title="修改" width="90%"
			:visible.sync="editDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
			<el-form inline>
				<el-form-item label="题目" required>
					<el-input v-model="editForm.title"></el-input>
				</el-form-item>
				<el-form-item label="专业">
			  	<el-select v-model="editForm.type" placeholder="专业类型">
			  		<el-option v-for="(type,index) in types" :label="type.label" :value="type.value"></el-option>
			  	</el-select>
				</el-form-item>
				<el-form-item label="题目分类">
					<el-select v-model="editForm.category" placeholder="题目分类">
						<el-option v-for="(category,index) in types[subjectType-1].children" :label="category.label" :value="category.value"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<MDViewer ref="editMdViewer" :mdText="editForm.content"></MDViewer>
		  
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible=false">取 消</el-button>
				<el-button type="primary" @click="edit">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { 
		api_subject_list, api_subject_detail, 
		api_subject_create, api_subject_modify, 
		api_subject_remove ,
	} from '@/api/subject'
	import MDViewer from '../../components/MDViewer.vue'
	import options from '../../utils/options.js'
	export default {
		components: {
			MDViewer
		},
		data() {
			return {
				types: options, //下来选项列表（目前由前端存储）
				subjectType: 1, // 1 前端 2 JAVA
				subjectCategory: 0, // 题目分类
				subjectName: '', //题目名称
				tableLoading: false, 
				tableData: [],
				searchForm: {
					pageNum: 1,
					pageSize:15,
					total: 0,
					title: '', //标题搜索
					category: '' ,//题目分类搜索
					type: 1//学科分类搜索
				},
				createDialogVisible: false,
				createForm: {
					title: '',
					type: 1,
					category: 1
				},
				editDialogVisible: false,
				editForm: {
					
				}
			}
		},
		computed: {
			techType() {
				return function(state) {
					return ['--','前端','JAVA'][state]
				}
			},
			subCategory() {
				return function(state) {
					switch(this.searchForm.type) {
						case 1 : { //前端学科
							return ['--','HTML+CSS','Javascript','Vue相关','React相关','网络通信','项目工程化','nodeJS','TypeScript','数据结构','小程序','设计模式','其他'][state]
						}
						case 2 : { //JAVA学科
							return ['--','JAVASE','JavaWeb','SSM','Spring','Mico Service','BigData', 'DataBase'][state]
						}
					}
				}
			}
		},
		mounted() {
			this.load_data();
		},
		methods: {
			search() {
				this.searchForm.title = this.subjectName
				this.searchForm.category = this.subjectCategory
				this.searchForm.type = this.subjectType
				this.searchForm.pageNum = 1
				this.load_data();
			},
			load_data() {
				this.tableLoading = true
				api_subject_list({
					...this.searchForm
				}).then(res => {
					this.tableData = res.data.result
					this.searchForm.total = res.data.total
					this.tableLoading = false
				})
			},
			save() {
				
				this.createForm.content = this.$refs.createMdViewer.md_str()
				api_subject_create(this.createForm).then(res=>{
					this.$message.success(res.data.msg);
					this.createDialogVisible = false
					this.load_data()
				})
				// console.log(this.$refs.mdviewer.html_str())
				// console.log(this.$refs.mdviewer.md_str())
			},
			page_change(pageNum) {
				this.searchForm.pageNum = pageNum
				this.load_data();
			},
			open_edit_dialog(row) {
				this.editDialogVisible = true
				this.tableLoading = true
				api_subject_detail({ id: row.id }).then(res=>{
					this.editForm = res.data.result
					this.tableLoading = false
				})
			},
			edit() {
				this.editForm.content = this.$refs.editMdViewer.md_str()
				api_subject_modify(this.editForm).then(res=>{
					this.$message.success(res.data.msg);
					this.editDialogVisible = false
					this.load_data()
				})
			},
			remove(row) {
				api_subject_remove({ id: row.id }).then(res=>{
					this.load_data()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.admin {
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
		.demo-form-inline {
		}
	}
	::v-deep {
		.el-dialog {
			margin: 5vh auto 0 !important;
		}
		.el-dialog__body {
			padding: 5px 20px;
			height: 75vh;
		}
	}
</style>
